<template>
    <div class="progress-wrapper" ref="progress" :style="getProgressStyle">
        <div class="progress-bg" :style="getBgStyle"></div>
        <div class="progress-txt-wrapper">
            <text class="progress-txt" :style="{color: color, fontSize: fontSize}">{{txt}}</text>
        </div>
    </div>
</template>

<style scoped>
    .progress-wrapper {
        position: relative;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        overflow: hidden;
    }
    .progress-bg {
        flex-direction: row;
    }
    .progress-txt-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .progress-txt {
        text-align: center;
        font-family: msyhl;
    }
</style>

<script>
    export default{
        props:{
            percent: {
                type: String,
                required: true,
                default: '0%'
            },
            borderColor: {
                type: String,
                default: '#e31336'
            },
            borderWidth: {
                type: Number,
                default: 1
            },
            borderRadius: {
                type: Number,
                default: 100
            },
            color: {
                type: String,
                default: '#e31336'
            },
            fontSize: {
                type: Number,
                default: 12
            },
            bg: {
                type: String,
                default: 'rgba(227,19,54, 0.3)'
            },
            txt: {
                type: String,
                default: '已抢购0%'
            },
            itemWidth:{
                type: [Number],
                default: 84
            },
            itemHeight:[Number],
            itemBg:{
                type: String,
                default: 'transparent'
            }
        },
        data(){
            return {}
        },
        computed: {
            getProgressStyle(){
                let style = {
                    borderColor: this.borderColor,
                    borderWidth: 1,
                    borderRadius: this.borderRadius,
                    backgroundColor: this.itemBg
                };

                if(this.itemWidth) style.width = this.itemWidth;
                if(this.itemHeight) style.height = this.itemHeight;

                return style;
            },
            getBgStyle(){
                let percent = parseFloat(this.percent.replace('%', ''));
                let _width = (this.itemWidth * percent)/100;
                let style = {
                    width: _width,
                    backgroundColor: this.bg,
                };
                if(percent < 100) {
                    style.borderTopLeftRadius = this.borderRadius + 2;
                    style.borderBottomLeftRadius = this.borderRadius + 2;
                } else {
                    style.width = style.width - 2;
                    style.borderRadius = this.borderRadius + 2;
                }
                return style;
            }
        }
    }
</script>
